<template>
  <div class="games">
    <Header class="homeHeader" />
    <TopGames @getList="getList" />
    <router-view class="main" :dataList="dataList" />
    <div class="footer">
      <Footer />
    </div>
  </div>
</template>
<script>
import Header from "../pcComponents/header.vue";
import Footer from "../pcComponents/footer.vue";
import TopGames from "@/components/topGames.vue";
export default {
  name: "games",
  components: {
    Header,
    Footer,
    TopGames,
  },
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    getList(data) {
      this.dataList = data;
      localStorage.setItem("dataList", JSON.stringify(this.dataList));
    },
  },
  created() {
    // 页面加载时从localStorage获取数据
    this.dataList = JSON.parse(localStorage.getItem("dataList")) || [];
  },
};
</script>
<style lang="less" scoped>
.games {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .homeHeader {
    width: 100%;
    height: 50px;
  }
  .main {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .footer {
    width: 100%;
    height: 100%;
  }
}
</style>
